<template>
  <div class="dormitory">
    <div class="container1" ref="container1"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    //在钩子函数中处理图表
    // 初始化echarts
    let mychart = echarts.init(this.$refs.container1);
    mychart.setOption({
      title: {
        text: "演示图表",
      },
      xAxis: {
        //x轴
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {}, //y轴
      tooltip: { //tooltip的作用是当鼠标放到图表上时，会有提示出现，tooltip中有没有内容都可以
          trigger: "axis",
          axisPointer: { //指示器
            type: "cross" //十字线
          }
        },
      series: [ //系列
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
        {
          name: "库存",
          type: "bar",
          data: [15, 10, 36, 10, 70, 30],
        },
      ],
    });
  },
};
</script>
<style scoped>
.container1 {
  width: 300px;
  height: 300px;
}
</style>